<template>

    <div v-if="!loginForm" class="container">
        <div class="columns is-centered">
            <div class="column is-5-desktop is-4-fullhd">
                <div class="box mt-6">
                    <p class="subtitle has-text-centered">找回密码</p>
                    <form action="/login" method="post">
                        <div class="mb-2">
                            <div class="field is-floating-label">
                                <!-- 账号图标 -->
                                <label class="label"><i class="fa fa-envelope" aria-hidden="true"></i></label>
                                <div class="control is-clearfix">
                                    <input type="text" autocomplete="username" maxlength="150" name="u"
                                        autofocus="autofocus" autocapitalize="none" required="required" id="id_username"
                                        class="input" placeholder="请输入邮箱（回车获取验证码）">
                                    <small class="help counter is-invisible"> 5 / 150 </small>
                                </div>
                            </div>
                        </div>

                        <div class="mb-2">
                            <div class="field is-floating-label">
                                <!-- 账号图标 -->
                                <label class="label"><i class="fa fa-indent" aria-hidden="true"></i></label>
                                <div class="control is-clearfix">
                                    <input type="text" autocomplete="username" maxlength="150" name="u"
                                        autofocus="autofocus" autocapitalize="none" required="required" id="id_username"
                                        class="input" placeholder="请输入您收到的验证码">
                                    <small class="help counter is-invisible"> 5 / 150 </small>
                                </div>
                            </div>
                        </div>

                        <div class="mb-2">
                            <div class="field is-floating-label">
                                <!-- 重复 -->
                                <label class="label"><i class="fa fa-lock" aria-hidden="true"></i></label>
                                <div class="control is-clearfix">
                                    <input type="text" autocomplete="username" maxlength="150" name="u"
                                        autofocus="autofocus" autocapitalize="none" required="required" id="id_username"
                                        class="input" placeholder="请输入新密码">
                                    <small class="help counter is-invisible"> 5 / 150 </small>
                                </div>
                            </div>
                        </div>

                        <div class="mb-2">
                            <!-- 密码图标 -->
                            <div class="field is-floating-label"><label class="label"><i class="fa fa-lock"
                                        aria-hidden="true"></i></label>
                                <div class="control is-clearfix"><input type="password" autocomplete="current-password"
                                        name="p" required="required" id="id_password" class="input"
                                        placeholder="请重复新密码"></div>
                            </div>
                        </div>
                        <input type="hidden" name="next" value=""> <input type="hidden" name="next" value="">



                        <div class="is-size-7 has-text-grey-light mb-3"><a @click="changeFormTypeByPasswd">返回登录</a>
                        </div>
                        <input type="submit" value="修改密码" class=" button is-fullwidth is-primary">
                    </form>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
module.exports = {
    methods: {
        changeFormTypeByPasswd() {
            this.$emit("sendtypefrompasswd", 1);
        }
    }
};

</script>

<style>
</style>